import React from 'react'
import { Toast } from 'antd-mobile'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { actions as newsActionCraetors } from '../../redux/modules/news'
import config from '../../../config';
import './index.less';

class Index extends React.PureComponent {

  static contextTypes = {
    router: React.PropTypes.object.isRequired
  }

  state = {
    
  }

  componentDidMount() {

  }

  render() {
    return <section className="forum-page">
      <div className="nav">
        <div className="item active"><span>最热</span></div>
        <div className="item"><span>最新</span></div>
      </div>
      <div className="list-wrap">
        <div className="item" onClick={this.handleGo.bind(this, 1)}>
          <div className="no" style={{color: '#f60'}}>1</div>
          <div className="content">
            <div className="title">地球上的mavis哈哈哈哈地球上的mavis哈哈哈哈地球上的mavis哈哈哈哈</div>
            <div className="sub">197 万阅读</div>
          </div>
        </div>
        <div className="item">
          <div className="no" style={{color: '#f60'}}>2</div>
          <div className="content">
            <div className="title">地球上的mavis哈哈哈哈地球上的mavis哈哈哈哈地球上的mavis哈哈哈哈</div>
            <div className="sub">197 万阅读</div>
          </div>
        </div>
        <div className="item">
          <div className="no" style={{color: '#f60'}}>3</div>
          <div className="content">
            <div className="title">地球上的mavis哈哈哈哈地球上的mavis哈哈哈哈地球上的mavis哈哈哈哈</div>
            <div className="sub">197 万阅读</div>
          </div>
        </div>
        <div className="item">
          <div className="no">4</div>
          <div className="content">
            <div className="title">地球上的mavis哈哈哈哈地球上的mavis哈哈哈哈地球上的mavis哈哈哈哈</div>
            <div className="sub">197 万阅读</div>
          </div>
        </div>
        <div className="item">
          <div className="no">5</div>
          <div className="content">
            <div className="title">地球上的mavis哈哈哈哈地球上的mavis哈哈哈哈地球上的mavis哈哈哈哈</div>
            <div className="sub">197 万阅读</div>
          </div>
        </div>
        <div className="item">
          <div className="no">6</div>
          <div className="content">
            <div className="title">地球上的mavis哈哈哈哈地球上的mavis哈哈哈哈地球上的mavis哈哈哈哈</div>
            <div className="sub">197 万阅读</div>
          </div>
        </div>
        <div className="item">
          <div className="no">7</div>
          <div className="content">
            <div className="title">地球上的mavis哈哈哈哈地球上的mavis哈哈哈哈地球上的mavis哈哈哈哈</div>
            <div className="sub">197 万阅读</div>
          </div>
        </div>
      </div>
    </section>  
  }

  handleGo(id) {
    this.context.router.push(`${config.rootAlias}/forum/detail/${id}`)
  }

}

const stateToProps = state => ({
  ...state.news
})

const dispatchToProps = dispatch => ({
  actions: bindActionCreators(newsActionCraetors, dispatch)
})

export default connect(stateToProps, dispatchToProps)(Index);
